<template>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
          v-model="upLoadForm.username"
          name="姓名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
          v-model="upLoadForm.phone"
          name="手机号"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <!--上传视频模块-->
      <van-field name="uploader" label="请上传视频">
        <template #input>
          <van-uploader :after-read="afterRead1" v-model="fileList1" multiple/>
        </template>
      </van-field>
      <!--上传封面的图片-->
      <van-field name="uploader" label="请上传封面图片">
        <template #input>
          <van-uploader :after-read="afterRead2" v-model="fileList2" multiple/>
        </template>
      </van-field>
      <!--上传视频的标题-->
      <van-field
          v-model="upLoadForm.title"
          name="视频标题"
          label="视频标题"
          placeholder="视频标题"
          :rules="[{ required: true, message: '请填写视频标题' }]"
      />
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
</template>
<script setup>
import API from "../plugins/axiosInstance.js"
import {onMounted, reactive, ref} from "vue";
const fileList1 = ref([]);
const fileList2 = ref([]);
//上传文件的
const afterRead1 = (file) => {
  upLoadForm.file = file
};
//上传封面图片的
const afterRead2 = (file) => {
  upLoadForm.image = file
};
//上传视频的需要的字段
const upLoadForm = reactive({
  username: "",
  phone: "",
  file: '',
  image: '',
  title: "",
})
const onSubmit = (values) => {
  //新建一个from表的这样的话想怎么传递就怎么传递了
  let param = new FormData();//创建form对象
  param.append("file", upLoadForm.file.file);//为创建的form对象增加上传的文件
  param.append("image", upLoadForm.image.file);//为创建的form对象增加上传的文件
  //获取keys值然后进行遍历取出我们的需要的值
  let keys = Object.keys(upLoadForm)
  for (let i = 0; i < keys.length; i++) {
    console.log(keys[i])
    param.append(keys[i], upLoadForm[keys[i]]);
  }
  API({
    url: '/student/addVideo',
    method: 'post',
    data: param,
  }).then((res) => {
    console.log(res)
  });
};
//测试请求方法
const getData = function () {
}
</script>
<style scoped>
</style>